<template>
    <div class="loop-number">
        <h2>循环报数</h2>
        <h3>函数：</h3>
        <div>{{ circularReporting1 }}</div>
        <h3>结果：</h3>
        <div>{{ result[1] }}</div>
        <h3>函数：</h3>
        <div>{{ circularReporting2 }}</div>
        <h3>结果：</h3>
        <div>{{ result[2] }}</div>
        <h3>函数：</h3>
        <div>{{ circularReporting3 }}</div>
        <h3>结果：</h3>
        <div>{{ result[3] }}</div>
        <hr />
        <h2>模拟红绿灯</h2>
        <a-button :disabled="startRedGreenLightStatus" @click="handleStartRedGreenLight">开始</a-button>
        <h3>函数：</h3>
        <div>{{ redGreenLight1 }}</div>
        <h3>结果：</h3>
        <div :style="{ backgroundColor: nowLight['1'] }" class="light"></div>
        <h3>函数：</h3>
        <div>{{ redGreenLight2 }}</div>
        <h3>结果：</h3>
        <div :style="{ backgroundColor: nowLight['2'] }" class="light"></div>
    </div>
</template>
<script setup lang="ts">
import { onUnmounted, reactive, ref } from 'vue'
import * as circularReporting from './circularReporting'
import * as redGreenLight from './redGreenLight'

// 循环报数
const { circularReporting1, circularReporting2, circularReporting3 } =
    circularReporting
const result = reactive<{
    1: number | null
    2: number | null
    3: number | null
}>({
    1: null,
    2: null,
    3: null,
})

result[1] = circularReporting1(30, 3)
result[2] = circularReporting2(30, 3)
result[3] = circularReporting3(30, 3)

// 模拟红绿灯

const { redGreenLight1, redGreenLight2 } = redGreenLight
const nowLight = ref({
    1: '',
    2: '',
})
const startRedGreenLightStatus = ref(false)
const handleStartRedGreenLight = () => {
    startRedGreenLightStatus.value = true
    redGreenLight1(4 * 1000, 3 * 1000, 1 * 1000, function (light) {
        nowLight.value['1'] = light
    })
    redGreenLight2(4 * 1000, 3 * 1000, 1 * 1000, function (light) {
        nowLight.value['2'] = light
    })
}
</script>
<style lang="scss" scoped>
.loop-number {
    .light {
        $size: 20px;
        width: $size;
        height: $size;
        border-radius: $size;
    }
}
</style>
